<template>
    <view class="content">
        <!-- #ifndef MP-WEIXIN -->
        <view class="l-fixed">
            <view class="l-status"></view>
            <view class="l-head-title">
                我的<image @tap="handleSettingTap" class="l-icon-setting" src="../../static/common/icon/setting.png" mode=""></image>
            </view>
        </view>
        <view class="l-placeholder"></view>
        <!-- #endif -->

        <view class="l-body">
            <view class="l-body-head">
                <!-- <image class="l-head-img l-avatar" src="../../static/my_avatar.jpg" mode="aspectFill"></image> -->
				<image class="l-head-img l-avatar" :src="userInfo.avatarImg" mode="aspectFill"></image>
                <view class="l-head-intr">
                    <view class="l-head-user">
                        <view class="l-head-username" @tap="handleNicknameTap">{{userInfo.nickname}}</view></view>
                        <view class="l-head-gender">性别：{{userInfo.gender}}</view>
                        <view class="l-head-qq">QQ：{{userInfo.qqId}}</view>
                    </view>
                </view>
            </view>

            <view class="l-ul">
                <view class="l-li" @tap="navigateTo('myInformation')">
                    <view class="l-li-left">
                        <image class="l-icon-mine l-icon-mine-1" src="../../static/mine/login-guidelines.png" mode=""></image>
                        个人信息
                    </view>
                </view>

                <view class="l-li" @tap="navigateTo('myOrder')">
                    <view class="l-li-left">
                        <image class="l-icon-mine l-icon-mine-1" src="../../static/mine/l-icon-mine-2.png" mode=""></image>
                        我的订单
                    </view>
                    <view class="l-li-right">
                        <view class="l-li-right-value">
                            <!-- 动态绑定订单数量 -->
                        </view>
                    </view>
                </view>

                <view class="l-li" @tap="navigateTo('myComment')">
                    <view class="l-li-left">
                        <image class="l-icon-mine l-icon-mine-1" src="../../static/mine/l-icon-mine-4.png" mode=""></image>
                        我的评论
                    </view>
                    <view class="l-li-right">
                        <view class="l-li-right-value">
                            <!-- 动态绑定评论数量 -->
                        </view>
                        <view class="l-li-right-label">
                            <!-- 动态绑定评论互动信息 -->
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
	import Cookies from 'js-cookie';
	import store from '@/store/store.js';
	import config from '@/utils/config.js';
	import { mapState } from 'vuex';
	export default {
		 data() {
			return {
				headimg: '',
				userInfo: {
					avatarImg: '',
					gender: '',
					qqId: '',
					nickname: ''
				}
			};
		},
		computed: {
		    // 从Vuex的getter获取完整用户数据，包含token等信息
		    userdata() {
		        return store.getters.getUserData;
		    }
		},
		 mounted() {
				this.getUserInfo();
			},
		methods: {
			handleSettingTap() {
				this.navigateTo('mySettings');
			},
			navigateTo(page) {
				uni.navigateTo({
					url: `/pages/mine/${page}`
				});
			},
			handleNicknameTap() {
				this.$toast('昵称');
			},
			getUserInfo() {
				uni.showLoading({
					title: '加载中'
				});
				// 从Cookie获取token
				const token = Cookies.get('token');
				if (!token) {
					uni.hideLoading();
					uni.showToast({
						icon: 'error',
						title: '未获取到有效token，请先登录'
					});
					return;
				}
				uni.request({
					url: `${config.apiBaseUrl}/user/info`,
					method: 'GET',
					header: {
						'Content-Type': 'application/json',
						'token': token
					},
					success: (res) => {
						uni.hideLoading();
						if (res.data.code == 1) {
							this.updateUserInfo(res.data.data);
							console.log(res.data.data.avatarImg)
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.msg || '获取用户信息失败，请稍后重试'
							});
						}
					},
					fail: (err) => {
						uni.hideLoading();
						uni.showToast({
							icon: 'error',
							title: '获取用户信息失败，请检查网络或稍后重试'
						});
					}
				});
			},
			updateUserInfo(userData) {
				this.userInfo.avatarImg = userData.avatarImg;
				this.userInfo.gender = userData.sex;
				this.userInfo.qqId = userData.qqId;
				this.userInfo.nickname = userData.nickname;
			}
		}
	}
</script>

<style>
	/* 样式代码保持不变 */
	.l-head {
		font: bold var(--f-size-5) normal;
	}

	.l-head-title {
		line-height: var(--h-head);
		position: relative;
		padding: 0 var(--pad-lr);
		text-align: center;
		font-size: var(--f-size-3);
		background-color: #f0f0f0;
	}

	.l-icon-setting {
		width: 36rpx;
		height: 36rpx;
		position: absolute;
		top: 50%;
		right: var(--pad-lr);
		transform: translateY(-50%);
	}

	.l-body {
		padding: var(--pad-lr);
	}

	.l-body-head {
		width: 100%;
		height: 150rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.l-head-img {
		width: 150rpx;
		height: 100%;
		border-radius: 50%;
		margin-right: 35rpx;
	}

	.l-head-intr {
		display: flex;
		height: 100%;
		width: calc(100% - 185rpx);
		flex-direction: column;
		justify-content: space-between;
		padding-top: 10rpx;
	}

	.l-head-user {
		width: 100%;
		display: flex;
		height: var(--f-size-6);
		line-height: var(--f-size-6);
		white-space: nowrap;
	}

	.l-head-username {
		max-width: 60%;
		margin-right: 10%;
		font: bold var(--f-size-6) / var(--f-size-6) normal;
	}

	.l-head-city {
		width: 30%;
		display: flex;
		align-self: flex-end;
		font: var(--f-size-2) / var(--f-size-2) normal;
		color: var(--c-txt-2);
	}

	.l-head-city-txt {
		width: 100%;
	}

	.l-head-city-txt,
	.l-head-username {
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.l-head-intr-txt {
		width: 100%;
		font-size: 26rpx;
		color: var(--c-txt-2);
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.l-ul {
		padding: 120rpx 0 0;
	}

	.l-li {
		display: flex;
		align-items: center;
		margin-bottom: 52rpx;
		justify-content: space-between;
	}

	.l-li-left {
		display: flex;
		color: var(--c-txt-2);
		align-items: center;
	}

	.l-li-right {
		text-align: right;
	}

	.l-li-right-value {
		color: #515d61;
		font-size: 30rpx;
	}

	.l-li-right-label {
		color: #C1C1C1;
		font-size: var(--f-size-1);
	}

	.l-icon-mine {
		margin-right: 30rpx;
	}

	.l-icon-mine-7,
	.l-icon-mine-1 {
		width: 38rpx;
		height: 30rpx;
	}

	.l-icon-mine-3,
	.l-icon-mine-2 {
		width: 34rpx;
		height: 30rpx;
	}

	.l-icon-mine-4 {
		width: 32rpx;
		height: 30rpx;
	}

	.l-icon-mine-5 {
		width: 36rpx;
		height: 36rpx;
	}

	.l-icon-mine-6 {
		width: 38rpx;
		height: 26rpx;
	}

	.l-li-right-label-color {
		color: #FF9800;
	}
</style>